<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<script>
var obj = {
    a:{
        m:{
            n:5
        }
    }
}
 function defineReactive(data,key,val){
    if(arguments.length === 2){
        val = obj[key]
    }

    Object.defineProperty(data,key,{
        // 可枚举
        enumerable:true,
        // 可以被配置，比如被delete
        configurable:true,
        get(){
            console.log('访问'+key)
         return val
        },
        set(newval){
            console.log('改变'+key)
            if(val === newval){
                return
            }
            val = newval
        }

    })
}
// defineReactive(obj,'a',10)
// console.log(obj.a)
// obj.a = 90
// console.log(obj.a)

// defineReactive(obj,'b',20)
// console.log(obj.b)

console.log(obj.a.m.n)
</script>
</body>
</html>
